{% extends 'user/udai_welcome.html' %}
{% load static %}


<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">


        {% block siyou %}
            <div class="pull-right">
                <div class="user-content__box clearfix bgf">
                    <div class="title">账户信息-收货地址</div>
                    <form action="{% url 'user:add_address' %}" class="user-addr__form form-horizontal" role="form"
                          method="post">
                        {% csrf_token %}
                        <p class="fz18 cr">新增收货地址<span class="c6" style="margin-left: 20px">电话号码、手机号码选填一项，其余均为必填项</span>
                        </p>
                        <p>{{ message }}</p>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">收货人姓名：</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="name" placeholder="请输入姓名" type="text" name="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="details" class="col-sm-2 control-label">收货地址：</label>
                            <div class="col-sm-10">
                                <div class="addr-linkage">
                                    <select name="province" id="province">
                                        <option>--请选择--</option>
                                        {% for foo in ao %}
                                            <option value="{{ foo.id }}">{{ foo.area_name }}</option>
                                        {% endfor %}

                                    </select>
                                    <select name="city" id="city">
                                        <option>--请选择--</option>
                                    </select>
                                    <select name="area" id="area">
                                        <option>--请选择--</option>
                                    </select>
                                </div>
                                <input class="form-control" id="details" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码等信息"
                                       maxlength="30" type="text" name="address">
                            </div>
                        </div>
                        <!-- <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">地区编码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="code" placeholder="请输入邮政编码" type="text">
                            </div>
                        </div> -->
                        <div class="form-group">
                            <label for="mobile" class="col-sm-2 control-label">手机号码：</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="mobile" placeholder="请输入手机号码" type="text"
                                       name="user_phone">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-6">
                                <div class="checkbox">
                                    <label><input type="checkbox"><i></i> 设为默认收货地址</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-6">
                                <button type="submit" class="but">保存</button>
                            </div>
                        </div>
                        <script src="{% static 'js/jquery.citys.js' %}"></script>
                        <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
                        <script>
                            $(function () {
                                console.log('页面加载完成....');
                                $("#province").change(function () {
                                    //选择的省
                                    pcode = $(this).val();
                                    console.log(pcode);
                                    //ajax请求后台接口,获取城市的列表, 局部更新到页面
                                    //ajax请求后台接口,获取城市的列表, 局部更新到页面
                                    $.ajax({
                                        type: "get",
                                        url: "/user/get_city/",
                                        data: "pcode=" + pcode,
                                        success: function (msg) {
                                            console.log("Data Saved: " + msg);
                                            //转换为json
                                            obj = eval("(" + msg + ")");
                                            console.log(obj.result);
                                            //清除城市选项,保留第1个
                                            $("#city option").first().siblings().remove();

                                            for (var i = 0; i < obj.result.length; i++) {
                                                $("#city").append("<option value=" + obj.result[i].city_id + ">" + obj.result[i].city + "</option>")
                                            }

                                        },
                                        error: function (res) {
                                            //状态码
                                            console.log(res.status)
                                        }
                                    });

                                });
                                //获取县城
                                $("#city").change(function () {
                                    //选择的省
                                    pcode = $(this).val();
                                    console.log(pcode);
                                    //ajax请求后台接口,获取城市的列表, 局部更新到页面
                                    //ajax请求后台接口,获取城市的列表, 局部更新到页面
                                    $.ajax({
                                        type: "get",
                                        url: "/user/get_area/",
                                        data: "pcode=" + pcode,
                                        success: function (msg) {
                                            console.log("Data Saved: " + msg);
                                            //转换为json
                                            obj = eval("(" + msg + ")");
                                            console.log(obj.result);
                                            //清除城市选项,保留第1个
                                            $("#area option").first().siblings().remove();

                                            for (var i = 0; i < obj.result.length; i++) {
                                                $("#area").append("<option value=" + obj.result[i]['area_id'] + ">" + obj.result[i]['area'] + "</option>")
                                            }

                                        },
                                        error: function (res) {
                                            //状态码
                                            console.log(res.status)
                                        }
                                    });

                                });
                            })
                        </script>
                    </form>
                    <p class="fz18 cr">已保存的有效地址</p>

                    <div class="table-thead addr-thead">
                        <div class="tdf1">收货人</div>
                        <div class="tdf2">所在地</div>
                        <div class="tdf3">
                            <div class="tdt-a_l">详细地址</div>
                        </div>
                        <!-- <div class="tdf1">邮编</div> -->
                        <div class="tdf1">电话/手机</div>
                        <div class="tdf1">操作</div>
                        <div class="tdf1"></div>
                    </div>
                    <div class="addr-list">

                        {% for foo in address_info %}

                            <div class="addr-item">
                                <div class="tdf1">{{ foo.people }}</div>
                                <div class="tdf2 tdt-a_l">{{ foo.province.area_name }}|{{ foo.town.area_name }}|{{ foo.district.area_name }}</div>
                                <div class="tdf3 tdt-a_l">{{ foo.address }}</div>
                                <!-- <div class="tdf1">350104</div> -->
                                <div class="tdf1">{{ foo.phone }}</div>

                                <div class="tdf1 order">
                                    <a href="{% url 'user:udai_address_edit' foo.id %}">修改</a><a
                                        href="{% url 'user:delete_address'  foo.id%}" id="dd">删除</a>
                                </div>
                                <div class="tdf1">
                                    <a href="" class="default">设为默认</a>
                                </div>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        {% endblock %}
        <script>
            $(function () {
                console.log('删除开始');
                $('#dd').click(function () {
                    var a_id = $('#dd').val();
                    console.log(a_id);
                    $.ajax({
                        type: "get",
                        url: "/user/delete_address/",
                        data: "id=" + a_id,
                        success: function (msg) {
                            console.log("Data Saved: " + msg);
                            //转换为json
                            obj = eval("(" + msg + ")");
                            console.log(obj.result);
                            $(#dd).remove()

                        }
                        error: function (res) {
                            //状态码
                            console.log(res.status)
                        }
                    });
                })
            })
        </script>
    </section>
</div>
